<template>
  <div class="data">
    <el-form :model="form" label-width="100px">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="请求时间戳" prop="name">
            <el-input readonly v-model="form.id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="ID" prop="name">
            <el-input readonly v-model="form.startTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="请求地址" prop="name">
            <el-input readonly v-model="form.url"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="请求时间" prop="name">
            <el-input readonly v-model="form.requestTime"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="响应时间" prop="name">
            <el-input readonly v-model="form.responseTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="请求方式" prop="name">
            <el-input readonly v-model="form.method"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="name">
            <el-input readonly v-model="form.endTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="客户端IP" prop="name">
            <el-input readonly v-model="form.clientIp"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务端IP" prop="name">
            <el-input readonly v-model="form.hostIp"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="客户端端口" prop="name">
            <el-input readonly v-model="form.clientPort"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务端端口" prop="name">
            <el-input readonly v-model="form.serverPort"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="请求体" prop="name">
            <el-input readonly v-model="form.body"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="时间" prop="name">
            <el-input readonly v-model="form.date"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="请求类型" prop="name">
            <el-input readonly v-model="form.type"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求结果" prop="name">
            <el-input readonly v-model="form.result"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="总耗时" prop="name">
            <el-input readonly v-model="form.time"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下载耗时" prop="name">
            <el-input readonly v-model="form.download"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="请求耗时" prop="name">
            <el-input readonly v-model="form.request"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="响应耗时" prop="name">
            <el-input readonly v-model="form.response"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="活动名称" prop="name">
            <el-input readonly v-model="form.protocol"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="DNS耗时" prop="name">
            <el-input readonly v-model="form.dns"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="代理名称" prop="name">
            <el-input readonly v-model="form.hostname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求路径" prop="name">
            <el-input readonly v-model="form.path"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script src="./detail.js"></script>
<style lang="scss" src="./detail.scss" scoped></style>